<template>
	<view class="container">
		<image mode="widthFix" src="@/static/img/search_bg.png" class="bg"></image>
		<view class="search_input">
			<text class="input_hint">如遇订单查询异常请联系客服</text>
			<view class="input_code">
				<image class="input_icon" src="@/static/img/search.png"></image>
				<input style="width: 100%;" v-model="code" @input="inputCode" placeholder-class="placeholder"
					placeholder="请输入编号" :always-embed="true" @confirm="search" />
			</view>
		</view>
		<view class="bottom_box">
			<view class="search_box">
				<button @click="search" class="search_btn" :class="{'search_btn_select' : isHighlight}">查询</button>
			</view>
			<text class="bottom_hint">注意: 锁单后不支持退款</text>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isHighlight: false,
				code: "",
				// 1788852081651326978
			}
		},
		methods: {
			search() {
				// wx.request({
				// 	url:"https://www.hnsnkyyckjfw.com/jeecg-boot/trusteeshipTask/sendTaskToIM",
				// 	header:{
				// 		"X-Access-Token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Imxpa2FpIiwiZXhwIjoxNzE3NDA0MjUyfQ.qxbpjqvmaGKFqkfTcXHl4tMbCnvKNlbNmgwU1K2GR60"
				// 	},
				// 	success(res){
				// 		console.log(res)
				// 	},
				// 	fail(err){
				// 		console.log(err)
				// 	}
				// })
				// return
				if (!this.code) {
					// this.$refs.uToast.show({
					// 	type: 'error',
					// 	icon: false,
					// 	message:"请输入编号后查询"
					// })
					return
				}
				uni.showLoading()
				this.$minApi.searchOrder({
					id: this.code
				}).then(res => {
					console.log("数据为" + JSON.stringify(res))
					if (res.code == 200 && res.result.records.length != 0) {
						let data = encodeURIComponent(JSON.stringify(res.result));
						uni.navigateTo({
							url: `/pages/index/index?data=${data}&orderId=${this.code}`
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: "订单编号错误"
						})
					}
				}).finally(e => {
					uni.hideLoading()
				})

			},
			inputCode(e) {
				let value = e.target.value
				if (value) {
					this.isHighlight = true
				} else {
					this.isHighlight = false
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F7F7F7;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.bg {
		width: 100%;
	}

	.search_input {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
		top: 50%;

		.input_code {
			margin-top: 20rpx;
			background-color: white;
			width: 80%;
			height: 70rpx;
			display: flex;
			border: 5rpx solid #F3F3F3;
			border-radius: 15rpx;
			align-items: center;

			.input_icon {
				width: 40rpx;
				height: 35rpx;
				margin-left: 20rpx;
			}

			input {
				margin-left: 10rpx;
			}

			.placeholder {
				color: #C3C3C3;
			}
		}

		.input_hint {
			color: #C3C3C3;
			font-size: 24rpx;
		}
	}

	.search_box {
		width: 100%;
		height: 120rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;

		.search_btn {
			height: 80rpx;
			font-size: 24rpx;
			width: 90%;
			font-size: 30rpx;
			line-height: 80rpx;
			color: white;
			opacity: 0.5;
			background: linear-gradient(to right, #5FB7F7, #0F7EF9);
		}

		.search_btn_select {
			opacity: 1;
		}
	}



	.bottom_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 400rpx;

		.bottom_hint {
			color: #C3C3C3;
			font-size: 24rpx;
		}
	}
</style>